We're using cookies, but you can turn them off in your browser settings. Otherwise, you are agreeing to our use of cookies. Learn more in our Privacy Policy.

Checklist

  • Months Prior to the Exam

    Address the items below a few months before your first exam.

    • Review all testing policies
    • Confirm your valid passport
    • Print your exam admission ticket
    • Check for test center conditions
    • Plan your transportation
    • Review the Rules of Procedure

  • Months Prior to the Exam

    Address the items below a few months before your first exam.

    • Review all testing policies
    • Confirm your valid passport
    • Print your exam admission ticket
    • Check for test center conditions
    • Plan your transportation
    • Review the Rules of Procedure

  • Months Prior to the Exam

    Address the items below a few months before your first exam.

    • Review all testing policies
    • Confirm your valid passport
    • Print your exam admission ticket
    • Check for test center conditions
    • Plan your transportation
    • Review the Rules of Procedure

HTML

<section class="grid-container">
    <ul class="checklist full-width">
        <li class="checklist-item">
            <div class="checklist-item-blue">
                <h4 class="checklist-item-title">Months Prior to the Exam</h4>
                <p class="checklist-item-subtitle">Address the items below a few months before your first exam.</p>
            </div>
            <ul class="checklist-item-white-overview">
                <li>Review all testing policies</li>
                <li>Confirm your valid passport</li>
                <li>Print your exam admission ticket</li>
                <li>Check for test center conditions</li>
                <li>Plan your transportation</li>
                <li>Review the Rules of Procedure</li>
            </ul>
        </li>
        <li class="checklist-item">
            <div class="checklist-item-blue">
                <h4 class="checklist-item-title">Months Prior to the Exam</h4>
                <p class="checklist-item-subtitle">Address the items below a few months before your first exam.</p>
            </div>
            <ul class="checklist-item-white-overview">
                <li>Review all testing policies</li>
                <li>Confirm your valid passport</li>
                <li>Print your exam admission ticket</li>
                <li>Check for test center conditions</li>
                <li>Plan your transportation</li>
                <li>Review the Rules of Procedure</li>
            </ul>
        </li>
        <li class="checklist-item">
            <div class="checklist-item-blue">
                <h4 class="checklist-item-title">Months Prior to the Exam</h4>
                <p class="checklist-item-subtitle">Address the items below a few months before your first exam.</p>
            </div>
            <ul class="checklist-item-white-overview">
                <li>Review all testing policies</li>
                <li>Confirm your valid passport</li>
                <li>Print your exam admission ticket</li>
                <li>Check for test center conditions</li>
                <li>Plan your transportation</li>
                <li>Review the Rules of Procedure</li>
            </ul>
        </li>
    </ul>
</section>

Problem Being Solved

Content needs to be grouped and displayed in a checklist-like format.

When to Use

It can be used when there are many short tasks that the user needs to understand. It works best when the tasks can be naturally organized into several groups.

When Not to Use

It should not be used for complex or long tasks.

Formatting

  • Place checklist inside section that has the class name "grid-container"
  • If there is only one checklist box, the decorative green box will not be present